<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#box{
			width: 200px;
			height: 200px;
			background: pink;
		}
	</style>
</head>
<body>
	<div id="box" style="width: 300px">
		
	</div>
</body>
</html>
<script>
	//获取元素
	var boxDiv = document.getElementById("box");
     //获取行内样式
	console.log(boxDiv.style.width);
	//设置行内样式
	boxDiv.style.borderRadius = "50%";

	//获取全局样式
	//IE下获取全局样式
	// console.log(boxDiv.currentStyle);
	// console.log(boxDiv.currentStyle["backgroundColor"]);
	// console.log(boxDiv.currentStyle.backgroundColor);

	//其他浏览器包含（IE9+）
	// console.log(getComputedStyle(boxDiv,null)["backgroundColor"]);
	// console.log(getComputedStyle(boxDiv,null).backgroundColor);

	//获取伪元素内容的样式
	console.log(getComputedStyle(boxDiv,"::after").color);

	//getComputedStyle
	//第一个参数：元素；
	//第二个参数：伪元素选择器
	//如果第二个参数不存在，获取元素的所有样式
	//如果存在，获取伪元素选择器里面内容的所有样式

	

</script>